<template>
  <div id="weather">
    <div style="width:500px;margin:0 auto">
      <el-row>
      <el-col :span="8">
        <div class="sun" title="晴天" @click="weather('sun')"></div>
      </el-col>
      <el-col :span="8">
        <div class="rain" title="雨天" @click="weather('rain')"></div>
      </el-col>
      <el-col :span="8">
        <div class="snow" title="雪天" @click="weather('snow')"></div>
      </el-col>
    </el-row>
    <div class="bar">
      <div class="barpoint" :class="{'sunPoint':currentType=='sun','rainPoint':currentType=='rain','snowPoint':currentType=='snow'}"></div>
    </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentType:'sun',
    }
  },
  mounted(){
    if(window.Sgworld){
      var temType = window.sessionStorage.getItem('weatherType');
      this.currentType = temType?temType:'sun';
    }else{
      this.currentType = 'sun'
    }
    window.sessionStorage.setItem('weatherType',this.currentType)
    window.Sgworld.execute("grapi", "setweather", { type: this.currentType }, null);
  },
  methods: {
    // 设置时间
    weather(type) {
      if (type === this.currentType) {
        window.Sgworld.execute("grapi", "setweather", { type: "sun" }, null);
        this.currentType = "sun";
      } else {
        window.Sgworld.execute("grapi", "setweather", { type: type }, null);
        this.currentType = type;
      }
      window.sessionStorage.setItem('weatherType',this.currentType)
    },
  }
}
</script>
<style scoped>
.el-button{
  font-size: 30px;
}
.bar{
  width: 370px;
  height: 20px;
  line-height: 20px;
  margin-left: 15px;
  margin-top: 20px;
  border-radius: 10px;
  position: relative;
  background: linear-gradient( to right,rgba(0, 132, 255, 0.25), rgba(0, 132, 255, 1) )!important;
}
.barpoint{
  position: absolute;
  width: 36px;
  height: 36px;
  top: -8px;
  left:0;
  border-radius: 18px;
  /* border: 1px solid white; */
  background: white;
}
.sunPoint{
  left: 0;
}
.rainPoint{
  left: 45%;
}
.snowPoint{
  left: unset;
  right: 0;
}
.sun,.rain,.snow{
  width:63px;
  height:66px;
  background:url('../../../static/images/modules/sun.png');
  cursor: pointer;
}
.rain{
  background:url('../../../static/images/modules/rain.png');
}
.snow{
  background:url('../../../static/images/modules/snow.png');
}
</style>